<template>
  <div class="monitoring-data">
    <el-card :body-style="{ padding: '0px' }">
      <div slot="header">
        <tools-btn
          :toolsData="toolsData"
          @addData="addData"
          @refresh="refresh"
          @search="search"
          @fieldSet="fieldSet"
          @hasOperation="hasOperation"
        />
      </div>
      <!-- card body -->
      <table-list
        id="tableExcel"
        :table="table"
        ref="tableList"
        @handleEdit="handleEdit"
        @handleDel="handleDel"
      >
        <template
          slot-scope="props"
          slot="online"
        >
          <span
            :class="props.obj.row.online==='在线'?'typeSuccsee':'typeError'"
            v-text="props.obj.row.online"
          />
        </template>
        <template
          slot-scope="props"
          slot="maintainStatus"
        >
          <span
            :class="props.obj.row.maintainStatus==='正常'?'typeSuccsee':'typeError'"
            v-text="props.obj.row.maintainStatus"
          />
        </template>
        <template
          slot-scope="props"
          slot="deviceStatus"
        >
          <span
            :class="props.obj.row.deviceStatus==='0'?'typeSuccsee':'typeError'"
            v-text="props.obj.row.deviceStatus==='0'?'正常':'异常'"
          />
        </template>
      </table-list>

      <pagination
        :page="page"
        @pageSizeChange="pageSizeChange"
        @pageCurrentChange="pageCurrentChange"
      />
    </el-card>
    <!-- 搜索框 -->
   <el-dialog
      :title="searchDialog.title"
      v-if="searchDialog.visible"
      :visible.sync="searchDialog.visible"
      @close="closesearchDialog('searchDialog')"
      width="31%"
    >
      <el-form
        :model="searchDialog.data"
        ref="searchDialog.data"
        label-width="80px"
      >
        <el-form-item label="设备名称">
          <el-input
            v-model="searchDialog.person_name"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="设备号">
          <el-input
            v-model="searchDialog.id_IMEI"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="设备地址">
          <el-input
            v-model="searchDialog.address"
            size="mini"
          />
        </el-form-item>
        <el-form-item label="在线状态">
          <el-select v-model="value" placeholder="请选择在线状态" size="mini" style="width:100%;" @change="onlState">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维护状态">
          <el-select v-model="value1" placeholder="请选择维护状态" size="mini" style="width:100%;" @change="maState">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button
          size="small"
          plain
          @click="closesearchDialog('searchDialog')"
        >取 消</el-button>
        <el-button
            slot="reference"
            type="primary"
            size="small"
            v-text="'确 定'"
            @click="searchSubmit"
            plain
          />
        <!-- <el-popover
          class="edit-dialog-popover"
          placement="top"
          v-model="searchDialog.submitVisible"
        >
          <p style="text-align: center; margin-top: 0; color:#409eff">
            确定提交吗？
          </p>
          <div style="text-align: center">
            <el-button
              size="mini"
              @click="searchDialog.submitVisible = false"
              v-text="'取 消'"
              plain
            />
            <el-button
              type="primary"
              size="mini"
              v-text="'确 定'"
              @click="searchSubmit"
              plain
              id="btn"
            />
          </div>
        </el-popover> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import TableList from "../../components/Table/TableList";
import Pagination from "../../components/Pagination/pagination";
import ToolsBtn from "../../components/Tools/ToolsBtn";
import TableProp from "../../utils/tableProps.js";
import PageProp from "../../utils/pageProps.js";
import THead from "./MHead.js";
export default {
  name: "MonitoringData",
  data() {
    return {
      table: TableProp,
      page: PageProp,
      toolsData: {
        title: "实时数据",
        oBtnShow: [
          { btn0: false }, // 新增按钮
          { btn1: true }, // 刷新按钮
          { btn2: true }, // 搜索按钮
          { btn3: false }, // 设置按钮
          { btn4: true } // 导出Excel按钮
        ]
      },
      searchDialog: {
        title: "搜 索",
        visible: false,
        submitVisible: false,
        data: null,
        person_name: '',
        id_IMEI: '',
        address: ''
      },
      value: '',
      options: [{
          value: '0',
          label: '不在线'
        },{
          value: '1',
          label: '在线'
        }
      ],
      statLine: '',
      value1: '',
      options1: [{
          value: '0',
          label: '不正常'
        },{
          value: '1',
          label: '正常'
        }
      ],
      statMa: ''
    };
  },
  components: {
    TableList,
    Pagination,
    ToolsBtn
  },
  created() {
    this.table.tHead = THead;
    this.table.identifier = true;
    this.table.hasOperation = false;
    this.getList(1, 10);
  },
  methods: {
    // 新增数据
    addData() {
      this.handleEdit();
    },
    // 列表数据刷新
    refresh() {
      this.getList(1, 10);
    },
    // 搜索
    search() {
      this.searchDialog.visible = true;
      this.searchDialog.submitVisible = true;
    },
    onlState(val){
      if(val === '0'){
        this.statLine = '不在线'
      } else {
        this.statLine = '在线'
      }
    },
    maState(val){
      if(val === '0'){
        this.statMa = '不正常'
      } else {
        this.statMa = '正常'
      }
    },
    searchSubmit(){
      const params = {
        ID_IMEI: this.searchDialog.id_IMEI,
        address: this.searchDialog.address,
        person_name: this.searchDialog.person_name,
        online: this.statLine === '' ? null : this.statLine,
        maintainStatus: this.statMa === '' ? null : this.statMa
      }
      this.$api.DATA.monitoringData(params)
      .then(res => {
        // const data = res.data;
        const Data = []
        for(var i=0;i<res.data.length;i++){
          Data[i] = {}
          if(res.data[i].deviceStatus === '1'){
            Data[i].address = res.data[i].address
            Data[i].deviceStatus = res.data[i].deviceStatus
            Data[i].id_IMEI = res.data[i].id_IMEI
            Data[i].lastMainTainTime = res.data[i].lastMainTainTime
            Data[i].lastMainTime = res.data[i].lastMainTime
            Data[i].mainTainTimes = res.data[i].mainTainTimes
            Data[i].maintainPlan = res.data[i].maintainPlan
            Data[i].maintainStatus = res.data[i].maintainStatus
            Data[i].normalTime = '-'
            Data[i].online = res.data[i].online
            Data[i].person_name = res.data[i].person_name
            Data[i].releaseTime = res.data[i].releaseTime
          } else {
            Data[i].address = res.data[i].address
            Data[i].deviceStatus = res.data[i].deviceStatus
            Data[i].id_IMEI = res.data[i].id_IMEI
            Data[i].lastMainTainTime = res.data[i].lastMainTainTime
            Data[i].lastMainTime = res.data[i].lastMainTime
            Data[i].mainTainTimes = res.data[i].mainTainTimes
            Data[i].maintainPlan = res.data[i].maintainPlan
            Data[i].maintainStatus = res.data[i].maintainStatus
            Data[i].normalTime = res.data[i].normalTime
            Data[i].online = res.data[i].online
            Data[i].person_name = res.data[i].person_name
            Data[i].releaseTime = res.data[i].releaseTime
          }
        }
        const total = res.count;
        this.table.data = Data;
        this.page.total = total;
        this.searchDialog.visible = false;
        this.searchDialog.submitVisible = false;
      })
      .catch(() => {
        this.searchDialog.visible = false;
        this.searchDialog.submitVisible = false;
        this.$message({
          message:"暂无数据",
          type: 'error'
        });
      })
    },
    // 字段设置
    fieldSet() {
    },
    // 隐藏表格操作列
    hasOperation() {
      this.table.hasOperation = false
    },
    // 获取数据列表
    getList(pageNo, pageSize) {
      this.table.data = [];
      this.table.loading = true;
      const params = {
        pageNo,
        pageSize
      };
      this.$api.DATA.monitoringData(params)
        .then(res => {
          const Data = []
          for(var i=0;i<res.data.length;i++){
            Data[i] = {}
            if(res.data[i].deviceStatus === '1'){
              Data[i].address = res.data[i].address
              Data[i].deviceStatus = res.data[i].deviceStatus
              Data[i].id_IMEI = res.data[i].id_IMEI
              Data[i].lastMainTainTime = res.data[i].lastMainTainTime
              Data[i].lastMainTime = res.data[i].lastMainTime
              Data[i].mainTainTimes = res.data[i].mainTainTimes
              Data[i].maintainPlan = res.data[i].maintainPlan
              Data[i].maintainStatus = res.data[i].maintainStatus
              Data[i].normalTime = '-'
              Data[i].online = res.data[i].online
              Data[i].person_name = res.data[i].person_name
              Data[i].releaseTime = res.data[i].releaseTime
            } else {
              Data[i].address = res.data[i].address
              Data[i].deviceStatus = res.data[i].deviceStatus
              Data[i].id_IMEI = res.data[i].id_IMEI
              Data[i].lastMainTainTime = res.data[i].lastMainTainTime
              Data[i].lastMainTime = res.data[i].lastMainTime
              Data[i].mainTainTimes = res.data[i].mainTainTimes
              Data[i].maintainPlan = res.data[i].maintainPlan
              Data[i].maintainStatus = res.data[i].maintainStatus
              Data[i].normalTime = res.data[i].normalTime
              Data[i].online = res.data[i].online
              Data[i].person_name = res.data[i].person_name
              Data[i].releaseTime = res.data[i].releaseTime
            }
          }
          // const data = res.data;
          const total = res.count;
          this.table.data = Data;
          this.page.total = total;
          this.table.loading = false;
        })
        .catch(() => {
          this.$message({
            message:"暂无数据",
            type: 'error'
          });
        });
    },
    // 分页大小
    pageSizeChange(size) {
      const tableDataLength = this.table.data.length;
      this.page.pageSize = size;
      if (tableDataLength < this.page.pageSize) {
        this.getList(1, size);
      } else {
        const pageNo = this.page.currentPage;
        this.getList(pageNo, size);
      }
    },
    // 关闭模态
    closesearchDialog(name) {
      if (name === "searchDialog") {
        this[name].submitVisible = false;
        this[name].data = null;
      }
      this[name].visible = false;
    },
    // 翻页
    pageCurrentChange(pageNo) {
      this.page.currentPage = pageNo;
      const size = this.page.pageSize;
      this.getList(pageNo, size);
    },
    // 编辑数据模态
    handleEdit(index, row) {
      this.editDialog.visible = true;
      if (index !== undefined && row !== undefined) {
        const title = `${row.name}`;
        const data = row;
        this.editDialog.title = title;
        this.editDialog.data = data;
      } else {
        this.editDialog.title = "添加";
        this.editDialog.data = {};
      }
    },
    // 提交数据
    handleSubmit() {
      this.editDialog.visible = false;
      this.editDialog.submitVisible = false;
    },
    // 删除
    handleDel() {
    },
    // 关闭模态
    closeDialog(name) {
      if (name === "editDialog") {
        this[name].submitVisible = false;
        this[name].data = null;
      }
      this[name].visible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.edit-dialog-popover {
  margin-left: 10px;
}
.typeSuccsee {
  color: #67c23a;
}
.typeError {
  color: #f56c6c;
}
</style>
